<template>
    <div class="banner-img">
        <img :src="getImageUrl(getData[0].image)" class="w-full h-[300px]" alt="" />
    </div>
    <div class="goods-details p-[10px] pt-[5px]">
        <div class="banner-img">
            <img src="" alt="" />
        </div>
        <div v-for="(item, index) in getData" :key="index">
            <div>
                <div>
                    <span class="text-[#FF2C3C] text-xl">￥</span>
                    <span class="text-[#FF2C3C] text-4xl">{{ item.price }}</span>
                    <span class="text-[#999]">/盒</span>
                    <span class="text-[#999] line-through pl-2">{{ item.originPrice }}</span>
                </div>
            </div>
            <div class="text_hidden font-medium text-xl">{{ item.name }}</div>
            <div class="placeholder">&nbsp;</div>
            <div class="flex flex-1 mt-3 container">
                <div class="flex flex-col pr-7">
                    <div class="text-xl">好利来</div>
                    <div class="text-[#999] text-xs pt-1">品牌</div>
                </div>
                <div class="flex flex-col pr-8">
                    <div class="text-xl">冷藏</div>
                    <div class="text-[#999] text-xs pt-1">储存方式</div>
                </div>
                <div class="flex flex-col pr-7">
                    <div class="text-xl">3天</div>
                    <div class="text-[#999] text-xs pt-1">保质期</div>
                </div>
                <div class="flex flex-col">
                    <div class="text-xl">肉厚且多汁</div>
                    <div class="text-[#999] text-xs pt-1">推荐理由</div>
                </div>
            </div>
        </div>
    </div>
    <div class="goods-details p-[10px]">
        <div class="flex items-center">
            <div class="text-[17px] text-[#999]">自提</div>
            <div class="pl-3 items-center pt-1">xxx自提点，明天16:00可提货</div>
        </div>
        <div class="flex pt-[20px] items-center">
            <div class="text-[17px] text-[#999]">保障</div>
            <div class="pl-3 text-[#33D192] items-center pt-1">
                支持保价 * 极速退款 * 72小时品质无忧
            </div>
            <div class="pl-5">></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import type options from './options'
import useAppStore from '@/stores/modules/app'

const { getImageUrl } = useAppStore()
type OptionsType = ReturnType<typeof options>
const props = defineProps({
    content: {
        type: Object as PropType<OptionsType['content']>,
        default: () => ({})
    },
    styles: {
        type: Object as PropType<OptionsType['styles']>,
        default: () => ({})
    }
})
const getData = computed(() => {
    const { data } = props.content
    return data
})
</script>

<style lang="scss">
.goods-details {
    margin: 10px 10px 0;
    background-color: #fff;
    border-radius: 7px;
    padding-bottom: 20px;
    overflow-x: hidden;

    .placeholder {
        min-height: 34px;
    }
    .text_hidden {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .container {
        background: #f6f8fa;
        padding: 10px;
        border-radius: 10px;
    }
}
</style>
